var chartDOMList = $("div.chart");

for (let i = 0; i < chartDOMList.length; i++) {
    eval($.format("var chart{0} = echarts.init(chartDOMList[{0}])", i));
}

var option = [
    {
        title: {
            text: 'Computing Network Graph (ComNet)'
        },
        tooltip: {
            trigger: 'item',
            formatter:  function (params, ticket, callback) {
                let res = params.data.name + "<br/>";
                let vals = params.data.value.split('\n');
                for (let v of vals) {
                    res += v + "<br/>";
                }
                return res;
            },
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            position:function(p){
                return [p[0] + 10, p[1] - 10];
            },
            extraCssText:'width:270px;height:135px;'
        },
        textStyle: {
            fontFamily: 'Cambria',
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                name: 'ComNet',
                type: 'graph',
                layout: 'none',
                symbolSize: 80,
                label: {
                    show: true,
                    position:'bottom',
                    textStyle: {
                        color:'black',
                        fontSize: 16
                    }
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 15],
                edgeLabel: {
                    fontSize: 18
                },
                data: [],
                links: [],
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0.1,
                    color: '#234F4F'
                }
            }
        ]
    },
    {
        title: {
            text: 'Computing Resource Utilization (%)'
        },
        textStyle: {
            fontFamily: 'Cambria',
        },
        grid: {
            left: '1%',
            right: '6%',
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: 'Computing Resource Utilization',
            data: [],
            type: 'line'
        }]
    },
    {
        title: {
            text: 'Storage Resource Utilization (%)'
        },
        textStyle: {
            fontFamily: 'Cambria',
        },
        grid: {
            left: '1%',
            right: '6%',
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: 'Storage Resource Utilization',
            data: [],
            type: 'line'
        }]
    },
    {
        title: {
            text: 'Service Delay (ms)'
        },
        textStyle: {
            fontFamily: 'Cambria',
        },
        legend: {
            data: ['GR-TO', 'GR-LC', 'FR-TO', 'FR-LC'],
            top: 'bottom',
        },
        grid: {
            left: '1%',
            right: '3%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'GR-TO',
                type: 'line',
                data: [],
                color: 'green',
            },
            {
                name: 'GR-LC',
                type: 'line',
                smooth: false,
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width: 2,
                            type:'dotted'
                        }
                    }
                },  
                data: [],
                color: 'green',
            },
            {
                name: 'FR-TO',
                type: 'line',
                data: [],
                color: 'orange',
            },
            {
                name: 'FR-LC',
                type: 'line',
                smooth: false,
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width: 2,
                            type:'dotted'
                        }
                    }
                },  
                data: [],
                color: 'orange',
            },
        ]
    },
    {
        title: {
            text: 'Edge Computing Efficiency (%)'
        },
        textStyle: {
            fontFamily: 'Cambria',
        },
        legend: {
            data: ['TO', 'LC'],
            top: 'bottom',
        },
        grid: {
            left: '1%',
            right: '3%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'TO',
                type: 'line',
                data: [],
                color: '#b0a2cb'
            },
            {
                name: 'LC',
                type: 'line',
                smooth: false,
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width: 2,
                            type:'dotted'
                        }
                    }
                },  
                data: [],
                color: '#6c908b'
            }
        ]
    },
    {
        title: {
            text: 'Delay Distribution'
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{a0}({b0} , {c0}) <br/>{a1}({b1} , {c1})',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            position:function(p){
                return [p[0] + 10, p[1] - 10];
            },
            extraCssText:'width:150px;height:50px;'
        },
        legend: {
            data: ['GR', 'FR'],
            top: 'bottom',
        },
        grid: {
            left: '1%',
            right: '12%',
            bottom: '8%',
            containLabel: true
        },
        textStyle: {
            fontFamily: 'Cambria'
        },
        calculable: true,
        xAxis: [
            {
                name:'(ms)',
                type: 'category',
                data: ['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'GR',
                type: 'bar',
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max Value'},
                        {type: 'min', name: 'Min Value'}
                    ]
                },
                color: 'green',
            },
            {
                name: 'FR',
                type: 'bar',
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max Value'},
                        {type: 'min', name: 'Min Value'}
                    ]
                },
                color: 'orange',
            }
        ]
    },
    {
        title: {
            text: 'Efficiency Distribution'
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{a0}({b0} , {c0}) <br/>{a1}({b1} , {c1})',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            position:function(p){
                return [p[0] + 10, p[1] - 10];
            },
            extraCssText:'width:150px;height:50px;'
        },
        legend: {
            data: ['TO', 'LC'],
            top: 'bottom',
        },
        grid: {
            left: '1%',
            right: '12%',
            bottom: '8%',
            containLabel: true
        },
        textStyle: {
            fontFamily: 'Cambria'
        },
        calculable: true,
        xAxis: [
            {
                name:'(％)',
                type: 'category',
                data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'TO',
                type: 'bar',
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max Value'},
                        {type: 'min', name: 'Min Value'}
                    ]
                },
                color: '#b0a2cb'
            },
            {
                name: 'LC',
                type: 'bar',
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max Value'},
                        {type: 'min', name: 'Min Value'}
                    ]
                },
                color: '#6c908b'
            }
        ]
    },
    {
        title: {
            text: 'Delay Composition'
        },
        textStyle: {
            fontFamily: 'Cambria'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: ['TO', 'FL', 'TR']
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        series: {
            name: 'Network',
            type: 'pie',
            radius: [30, 100],
            data: []
        }
    }
]

for (let i = 0; i < chartDOMList.length; i++) {
    eval($.format("chart{0}.setOption(option[{0}])", i));
}
